<template>
	<view>
		<text class="secret-info" v-if="transform !='translateY(0)'">旧浪News由lzzy.soft33制作</text>
		<view class="welcome-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
			:style="bodyStyle">
			<image src="../../static/icons/icon.png" class="icon-welcome"></image>
			<text class="welcome">WELCOME!</text>

			<text class="sub-welcome">欢迎加入旧浪News</text>
			<view class="upload-pic-container" @click="clickChooseImage">
				<image :src="userAvatar" mode="aspectFill" class="avatar"></image>
				<text class="input-holder">{{avatarUrl}}</text>
			</view>

			<input type="text" class="input-register-info" placeholder-class="input-holder" placeholder="请输入昵称"
				id="nick" @input="inputGet" />
			<input type="text" class="input-register-info" placeholder-class="input-holder" placeholder="请输入邮箱"
				id="email" @input="inputGet" />
			<input type="text" class="input-register-info" placeholder-class="input-holder" placeholder="请输入用户名"
				id="user" @input="inputGet" />
			<input v-if="isPwd" :value="pwdValue" type="text" class="input-register-info"
				placeholder-class="input-holder" placeholder="请输入密码" id="password" @input="inputGet" />

			<input v-else :value="pwdValue" type="password" class="input-register-info" placeholder-class="input-holder"
				placeholder="请输入密码" id="password" @input="inputGet" />

			<text :class="isPwd ? 'iconfont icon-chakan ic-pwd-status' : 'iconfont icon-buchakan ic-pwd-status' "
				@click="clickSwtich"></text>
		</view>
		<text class="btn" @click="clickRegister">注册</text>>
	</view>


	</view>

</template>

<script>
	let pointY = 0
	export default {
		data() {
			return {
				avatarUrl: "请点击选择图片上传",
				transform: "translateY(0)",
				transtiton: '',
				userAvatar: "../../static/icons/default_user.png",
				isPwd: true,
				pwdValue: "",
				userValue: "",
				nick: "",
				email: "",
				user: "",
				password: ""
			}
		},
		computed: {
			
		},
		methods: {
			checkValid(){
							if(this.nick.length==0){
								this.nick=this.user
							}
							if(!this.$util.checkLength(this.user,6,"用户名")|| !this.$util.checkLength(this.password,6,+"密码")){
								return false
							}
							let regex = /^[A-Za-z0-9\u4e00-\u9fff]+@[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+)+$/
											if (!regex.test(this.email)) {
												uni.showToast({
													title: '电子邮箱格式不正确',
													icon: 'none'
												});
												return false
											}
											if (this.userAvatar == "../../static/icons/default_user.png") {
												uni.showToast({
													title: '请点击图片上传',
													icon: 'none'
												});
												return false
											}
											return true
						},
						clickRegister(){
						
							if(!this.checkValid()){
								return
							}
							let data = {
								"nick_name": this.nick,
													"user_name": this.user,
													"password": this.password,
													"avatar": pic,
													"email": this.email
							}
							let url = this.$params.host + this.$params.action_register;
											this.$request.post(url,data,res=>{
												uni.showToast({
													title: res.message,
													icon:'none'
												});
												if(!res.success){
													return
												}
												let app = getApp();
												app.globalData.uid = res.data.id;
												app.globalData.token = res.data.token;
												app.globalData.avatar = res.data.avatar;
												app.globalData.type = res.data.type;
												app.globalData.nickName = res.data.nickName;
												app.globalData.userName = res.data.userName;
												app.globalData.email = res.data.email;
												this.$noti.post(this.$params.noti_login_status)
												uni.navigateBack();
											},()=>{})
				
						},
						inputGet(event){
								let id = event.currentTarget.id
								//如果要把字符串作为变量名称,那么引用该变量就要使用模板字符串，将该变量名字符串作为插值，并在外层使用中括号
								this[`${id}`]=event.detail.value
								// console.log(this.nick);
								// console.log(this.email);
						},
						clickChooseImage(){
								let url =this.$params.host + this.$params.action_upload
								uni.chooseImage({
									success:res =>{
										let filePath= res.tempFilePaths[0]
										uni.showLoading({
											title: '上传头像',
											mask: false
										});
										this.$request.postFile(url,'file',filePath,{},res=>{
											uni.hideLoading()
											let json =JSON.parse(res.data)
											if(json.success){
												this.avatarUrl=json.data
												this.userAvatar= this.$params.host+json.data
											}
													console.log(res);
										})
								
									}
								})
						},
			clickSwtich() {
				this.isPwd = !this.isPwd
			},
			touchStart(e) {
				pointY = e.touches[0].clientY
			},
			touchMove(e) {
				let distance = e.touches[0].clientY - pointY
				if (distance > 150) {
					distance = 150
				}
				if (distance < 50) {
					return
				}
				this.transform = `translateY(${distance}rpx)`
				this.transition = ""
			},
			touchEnd(e) {
				this.transform = 'translateY(0)'
				this.transition = 'transform 1000ms minear'
			}
		}
	}
</script>

<style>
	@import url("register.css");
</style>
